<template>
  <view>
    <view :style="{ height: systemBarHeight + 'rpx' }"></view>
    <wd-card type="rectangle" custom-footer-class="card-footer">
      <view class="card-content">
        <wd-img :width="80" :height="80" :src="courseStatus.baseInfo.courseCover" style="border-radius: 8rpx" />
        <view style="flex: 1">
          <view class="title" style="color: rgba(0, 0, 0, 0.85)">{{ courseStatus.baseInfo.courseName }}</view>
          <view class="desc" style="color: rgba(0, 0, 0, 0.25)">{{ courseStatus.baseInfo.courseDesc }}</view>
        </view>
      </view>
    </wd-card>
    <wd-tabs v-model="activeTab">
      <wd-tab title="理论学习" :name="0">
        <wd-status-tip image="network" tip="该页面暂时无法访问" />
      </wd-tab>
      <wd-tab title="模拟测试" :name="1">
        <view class="exam-list">
          <view v-for="item in courseStatus.examList" :key="item.examId" class="exam-item">
            <text class="exam-item-title">{{ item.examName }}</text>
            <button @click="startPractice(item.examId)">开始训练 <wd-icon name="arrow-right" size="24rpx"></wd-icon></button>
          </view>
        </view>
      </wd-tab>
      <wd-tab title="真题演练" :name="2">
        <wd-status-tip image="network" tip="该页面暂时无法访问" />
      </wd-tab>
      <wd-tab title="课程进展" :name="3">
        <wd-status-tip image="network" tip="该页面暂时无法访问" />
      </wd-tab>
    </wd-tabs>
  </view>
</template>

<script setup>
import usePage from "@/hooks/usePage.js"
import useLoading from "@/hooks/useLoading.js"
import { getCourse, listExam } from "@/api/train/course"

const { loading, setLoading } = useLoading()

const { systemBarHeight, menuBotton } = usePage()

let courseId = ref(undefined)

const courseStatus = reactive({
  baseInfo: {},
  examList: [],
})

const activeTab = ref(1)

onLoad(options => {
  courseId.value = +options.courseId
  console.log("options", options)
  getCourseInfo()
  getExamList()
})

const getCourseInfo = async () => {
  setLoading(true)
  try {
    const res = await getCourse(courseId.value)
    courseStatus.baseInfo = res.data
    console.log("res", res)
  } finally {
    setLoading(false)
  }
}

const { loading: examLoading, setLoading: setExamLoading } = useLoading()

const getExamList = async () => {
  setExamLoading(true)
  try {
    const res = await listExam({
      courseId: courseId.value,
      pageNum: 1,
      pageSize: 100,
    })
    console.log("试卷列表", res)
    courseStatus.examList = res.data.list
  } finally {
    setExamLoading(false)
  }
}

const startPractice = examId => {
  uni.navigateTo({
    url: `/pages/student/practice/index?examId=${examId}`,
  })
}
</script>

<style lang="scss" scoped>
.card-content {
  display: flex;
  align-items: center;
  gap: 16rpx;

  .title {
    font-size: 26rpx;
    font-weight: 600;
  }

  .desc {
    font-size: 24rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /*省略几行写几*/
    -webkit-box-orient: vertical;
  }
}

.exam-list {
  display: flex;
  gap: 24rpx;
  flex-wrap: wrap;
  padding: 16rpx 24rpx;
}

.exam-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  align-items: center;
  padding: 32rpx 24rpx 32rpx 32rpx;

  background: #f4f5f9;
  border-color: #12b858;
  border-style: solid;
  /* 主色 */
  border-width: 0px 0px 0px 6rpx;
  border-radius: 16rpx;

  &-title {
    display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
    flex: 1;
    margin: 0 32rpx 0 24rpx;
    overflow: hidden; /* 隐藏超出范围的内容 */
    font-family: PingFang SC;
    font-size: 30rpx;
    font-weight: 500;
    line-height: normal;
    color: #1a1a1a;
    text-overflow: ellipsis; /* 使用省略号 */
    letter-spacing: 0em;
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 2; /* 限制显示两行 */
  }

  :deep(.wd-circle) {
    .wd-circle__text {
      font-size: 16rpx;
    }
  }

  image {
    width: 88rpx;
    height: 88rpx;
    border-radius: 48rpx;
  }

  button {
    display: flex;
    flex-direction: row;
    gap: 2rpx;
    align-items: center;
    justify-content: center;
    width: 128rpx;
    height: 56rpx;

    font-family: PingFang SC;
    font-size: 24rpx;
    font-weight: normal;
    line-height: 32rpx;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
    background: #12b858;
    border: none;
    border-radius: 8rpx;
    opacity: 1;
  }
}

:deep(.card-footer) {
  display: none;
}
</style>
